<template>
  <div class="login-container">
    <!-- 顶部图标区域 -->
    <div class="login-header">
      <img src="../assets/logo.png" alt="Logo" class="logo">
      <h1>欢迎登录</h1>
      <p class="subtitle">饿了么外卖平台</p>
    </div>

    <!-- 登录表单区域 -->
    <div class="login-form">
      <div class="form-group">
        <div class="input-with-icon">
          <i class="fa fa-mobile"></i>
          <input 
            type="text" 
            v-model="phoneNumber" 
            placeholder="请输入11位手机号码"
            class="form-input" 
          />
        </div>
      </div>
      
      <div class="form-group">
        <div class="input-with-icon">
          <i class="fa fa-lock"></i>
          <input 
            type="password" 
            v-model="password" 
            placeholder="请输入密码"
            class="form-input"
          />
        </div>
      </div>
      
      <div class="form-options">
        <div class="remember-me">
          <input type="checkbox" id="remember" v-model="rememberMe">
          <label for="remember">记住我</label>
        </div>
        <a href="#" class="forgot-password">忘记密码?</a>
      </div>

      <button @click="login" class="login-button">
        <span v-if="!isLoading">登录</span>
        <span v-else class="loading-spinner">
          <i class="fa fa-spinner fa-spin"></i>
        </span>
      </button>
      
      <div class="register-link">
        <span>还没有账号?</span>
        <a @click="register" class="register-button">立即注册</a>
      </div>
    </div>

    <!-- 快捷登录选项 -->
    <div class="social-login">
      <p class="divider"><span>其他登录方式</span></p>
      <div class="social-icons">
        <button class="social-icon wechat">
          <i class="fa fa-weixin"></i>
        </button>
        <button class="social-icon alipay">
          <i class="fa fa-alipay"></i>
        </button>
      </div>
    </div>

    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<script setup>
import Footer from "../components/Footer.vue";
import { useRouter } from "vue-router";
import { ref } from "vue";

// 引入我们重构后的 Pinia User Store
import { useUserStore } from '@/store/pinia_store_user.js';

const router = useRouter();
// 获取 store 实例
const userStore = useUserStore();
// 手机号码和密码的 ref
const phoneNumber = ref("");
const password = ref("");
const rememberMe = ref(false);
const isLoading = ref(false);

const login = async () => { // 使用 async/await 语法更清晰
  if (phoneNumber.value === "" || password.value === "") {
    alert("手机号码和密码不能为空！");
    return;
  }

  try {
    isLoading.value = true; // 显示加载状态
    
    // 将登录的复杂逻辑委托给 store 的 action
    // 这里会自动处理：API调用、Token保存、用户信息获取、存入localStorage
    await userStore.login(phoneNumber.value, password.value);
    
    // 登录成功后，Pinia Store 的状态已经更新，直接跳转页面即可
    console.log("登录成功！");
    
    // 增加调试信息
    console.log("登录后的Token:", localStorage.getItem('jwt-token'));
    console.log("登录后的用户信息:", localStorage.getItem('user-info'));
    
    // 即使获取用户信息失败，只要有token，我们仍然认为登录成功
    if (userStore.token) {
      router.push({ path: '/' });
    } else {
      throw new Error("登录过程中无法获取token");
    }

  } catch (error) {
    // 如果 store 的 action 出现任何错误（网络、业务），都会在这里被捕获
    console.error("登录失败:", error);
    
    // 显示详细错误信息
    if (error.response) {
      console.error("服务器响应:", error.response);
    }
    
    // error.message 来自我们 API 拦截器中精心处理过的错误信息
    alert(error.message || "登录时发生错误，请稍后重试");
  } finally {
    isLoading.value = false; // 结束加载状态
  }
};

const register = () => {
  router.push({ path: "register" });
};
</script>

<style scoped>
.login-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  padding-bottom: 14vw; /* 为底部Footer留出空间 */
}

/* 顶部图标区域 */
.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10vw 0;
  text-align: center;
  background: linear-gradient(135deg, #0097ff, #00b2ff);
  color: white;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 4px 10px rgba(0, 151, 255, 0.3);
  margin-bottom: 6vw;
}

.logo {
  width: 20vw;
  height: 20vw;
  object-fit: contain;
  margin-bottom: 3vw;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.login-header h1 {
  font-size: 6vw;
  margin: 0;
  font-weight: 600;
}

.subtitle {
  font-size: 3.5vw;
  opacity: 0.9;
  margin-top: 1vw;
}

/* 登录表单区域 */
.login-form {
  width: 85%;
  margin: 0 auto;
  padding: 6vw;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 4vw;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 8px;
  overflow: hidden;
}

.input-with-icon i {
  padding: 0 3vw;
  color: #0097ff;
  font-size: 5vw;
}

.form-input {
  border: none;
  outline: none;
  background-color: transparent;
  width: 100%;
  padding: 3vw 3vw 3vw 0;
  font-size: 3.5vw;
}

.form-options {
  display: flex;
  justify-content: space-between;
  margin: 3vw 0 5vw;
  font-size: 3vw;
}

.remember-me {
  display: flex;
  align-items: center;
  color: #555;
}

.remember-me input {
  margin-right: 1vw;
}

.forgot-password {
  color: #0097ff;
  text-decoration: none;
}

.login-button {
  width: 100%;
  padding: 3.5vw;
  background: linear-gradient(90deg, #0097ff, #00b2ff);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 4vw;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-button:active {
  transform: scale(0.98);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.register-link {
  text-align: center;
  margin-top: 4vw;
  font-size: 3.2vw;
  color: #666;
}

.register-button {
  color: #0097ff;
  text-decoration: none;
  font-weight: 600;
  margin-left: 1vw;
  cursor: pointer;
}

/* 快捷登录选项 */
.social-login {
  margin: 6vw auto;
  width: 85%;
  text-align: center;
}

.divider {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 3vw;
  margin: 5vw 0;
}

.divider:before,
.divider:after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ddd;
}

.divider span {
  padding: 0 3vw;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 5vw;
}

.social-icon {
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.social-icon i {
  font-size: 6vw;
}

.social-icon.wechat i {
  color: #07C160;
}

.social-icon.alipay i {
  color: #1677FF;
}

.social-icon:active {
  transform: scale(0.95);
}

/* 响应式调整 */
@media (min-width: 768px) {
  .login-form {
    max-width: 400px;
  }
  
  .social-login {
    max-width: 400px;
  }
}
</style>